<!-- 评论组件 -->
<template>
  <div class="comments-section" v-if="comments.length > 0">
    <h3 class="section-title">笔记评论</h3>

    <!-- 评论输入框 -->
    <div class="comment-input-container">
      <van-image class="emoji-icon" round :src="emojiIcon" width="24" height="24" />
      <input
        type="text"
        name="comment-input"
        class="comment-input"
        placeholder="说点什么，让TA也认识爱做饭的你"
        @focus="onInputFocus"
      />
    </div>

    <!-- 评论列表 -->
    <div class="comment-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-main">
          <!-- 头像 -->
          <van-image class="comment-avatar" round :src="comment.u?.p" width="32" height="32" />

          <!-- 内容区域 -->
          <div class="comment-content">
            <!-- 用户信息 -->
            <div class="comment-meta">
              <span class="comment-username">{{ comment.u?.n }}</span>
              <span class="comment-level">LV.{{ comment.u?.lvl }}</span>
            </div>
            <!-- 评论文本 -->
            <div class="comment-text">{{ comment.content[0].c }}</div>
            <!-- 回复内容 -->
            <div v-if="comment.reply" class="reply-section">
              <div class="reply-content">{{ comment.reply }}</div>
            </div>
          </div>
          <!-- 点赞按钮 -->
          <div class="comment-actions">
            <van-icon name="like-o" class="comment-like" />
            <span class="like-count">{{ comment.likeCount || '赞' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs } from 'vue'
const props = defineProps({
  comments: {
    type: Array,
    default: () => [],
  },
})
const { comments } = toRefs(props)
</script>

<style scoped>
.comments-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px 10px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.comment-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  position: relative;
}

.comment-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #f1f1f1;
  border-radius: 20px;
  font-size: 14px;
  color: #333;
  outline: none;
  background-color: #f9f9f9;
}

.comment-input::placeholder {
  color: #999;
}

.comment-list {
  margin-top: 16px;
}

.comment-item {
  margin-bottom: 16px;
  padding: 8px 0;
}

.comment-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.comment-avatar {
  flex-shrink: 0;

  border-radius: 50%;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.comment-username {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

.comment-level {
  font-size: 12px;
  color: #ffa500;
}

.comment-text {
  font-size: 12px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 8px;
  white-space: pre-line;
  /* 支持换行 */
}

.reply-section {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 4px;
}

.reply-content {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.comment-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.comment-like {
  font-size: 16px;
  color: #999;
}

.like-count {
  font-size: 12px;
  color: #999;
}
</style>
